<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>排行榜</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="css/rankstyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/tab.js"></script>

</head>
<body>

<section class="aui-flexView">
    <div style="background:#5f91f5;padding:20px 0px 10px 0px">
        <div class="aui-navBar aui-navBar-fixed">
            <div class="aui-center">
                <span id="name" class="aui-center-title"></span>
                <span id="rank" class="aui-center-title"></span>
            </div>
        </div>
        <div class="aui-navBar aui-navBar-fixed">
            <div class="aui-center">
                <span id="scores" class="aui-center-title"></span>
                <span id="time" class="aui-center-title"></span>
            </div>
        </div>
        <div class="aui-navBar aui-navBar-fixed">
            <div class="aui-center">
                <span id="city" class="aui-center-title"></span>
                <span id="hospitalName" class="aui-center-title"></span>
            </div>
        </div>

    </div>

    <section class="aui-scrollView">
        <div class="aui-tab" data-ydui-tab>
            <ul class="tab-nav b-line">
                <li class="tab-nav-item tab-active">
                    <a href="javascript:;">
                        <span>个人排行榜</span>
                    </a>
                </li>
                <li class="tab-nav-item">
                    <a href="javascript:;">
                        <span>医院排行榜</span>
                    </a>
                </li>
            </ul>
            <div class="tab-panel">
                <div id="personal" class="tab-panel-item tab-active">
                </div>
                <div id="hospital" class="tab-panel-item">
                </div>
            </div>
        </div>
    </section>
</section>

<script type="text/javascript">
    var data1 = [];
    var theRequest = new Object();
    window.onload = function () {
        var url = location.search; //获取url中"?"符后的字串 ('?modFlag=business&role=1')
        if (url.indexOf("?") != -1) {
            var str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串；
            var strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
            }
        }
        var params = {"phone": theRequest.phone};
        $.ajax({
            type: "POST",
            url: "/examSystem/web/personRank",
            data: params,
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    document.getElementById("name").innerHTML = "姓名：" + result.data.name;
                    document.getElementById("rank").innerHTML = "排名：" + result.data.rank;
                    document.getElementById("hospitalName").innerHTML = result.data.hospitalName;
                    document.getElementById("city").innerHTML = "城市：" + result.data.city;
                    document.getElementById("scores").innerHTML = "得分：" + result.data.scores;
                    document.getElementById("time").innerHTML = "用时：" + result.data.time + "秒";
                }
            },
            error: function (error) {
                alert("系统异常");
            }
        });
        $.ajax({
            type: "POST",
            url: "/examSystem/web/allRank",
            data: params,
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    var personal = document.getElementById("personal");
                    for (var i = 0; i < result.data.personalRank.length; i++) {
                        var p = result.data.personalRank[i];
                        var childHtml = "";
                        if (i == 0) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + p.name + "</h2><h3>分数:" + p.scores + "&nbsp;&nbsp;用时:"
                                + p.time + "秒</h3><p>" + p.hospitalName + "</p></div><div class=\"aui-flex-top\"><h2>" + p.rank + "</h2></div>";
                        }
                        if (i == 1) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + p.name + "</h2><h3>分数:" + p.scores + "&nbsp;&nbsp;用时:"
                                + p.time + "秒</h3><p>" + p.hospitalName + "</p></div><div class=\"aui-flex-top aui-flex-top-two\"><h2>" + p.rank + "</h2></div>";
                        }
                        if (i == 2) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + p.name + "</h2><h3>分数:" + p.scores + "&nbsp;&nbsp;用时:"
                                + p.time + "秒</h3><p>" + p.hospitalName + "</p></div><div class=\"aui-flex-top aui-flex-top-three\"><h2>" + p.rank + "</h2></div>";
                        }
                        if (i > 2 && i < 9) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + p.name + "</h2><h3>分数:" + p.scores + "&nbsp;&nbsp;用时:"
                                + p.time + "秒</h3><p>" + p.hospitalName + "</p></div><div class=\"aui-flex-top aui-flex-top-four\"><h2>" + p.rank + "</h2></div>";
                        }
                        if (i >= 9 && i < 99) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + p.name + "</h2><h3>分数:" + p.scores + "&nbsp;&nbsp;用时:"
                                + p.time + "秒</h3><p>" + p.hospitalName + "</p></div><div class=\"aui-flex-top aui-flex-top-ten\"><h2>" + p.rank + "</h2></div>";
                        }
                        if (i >= 99 && i < 999) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + p.name + "</h2><h3>分数:" + p.scores + "&nbsp;&nbsp;用时:"
                                + p.time + "秒</h3><p>" + p.hospitalName + "</p></div><div class=\"aui-flex-top aui-flex-top-hundred\"><h2>" + p.rank + "</h2></div>";
                        }
                        if (i >= 999) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + p.name + "</h2><h3>分数:" + p.scores + "&nbsp;&nbsp;用时:"
                                + p.time + "秒</h3><p>" + p.hospitalName + "</p></div><div class=\"aui-flex-top aui-flex-top-thousand\"><h2>" + p.rank + "</h2></div>";
                        }
                        var div = document.createElement("div");
                        div.className = "aui-flex b-line";
                        div.innerHTML = childHtml;
                        personal.appendChild(div);
                        if ((i + 1) == result.data.personalRank.length) {
                            childHtml = "<div class=\"aui-flex-box\"><h2></h2><h3></h3><p></p></div><div><h2></h2></div>";
                            var div = document.createElement("div");
                            div.className = "aui-flex b-line";
                            div.innerHTML = childHtml;
                            personal.appendChild(div);
                        }
                    }
                    for (var i = 0; i < result.data.hospitalRank.length; i++) {
                        var hospital = document.getElementById("hospital");
                        var h = result.data.hospitalRank[i];
                        var childHtml = "";
                        if (i == 0) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + h.hospitalName + "</h2><h3>前三总分:" + h.scores
                                + "&nbsp;&nbsp;总用时:" + h.time + "秒</h3></div><div class=\"aui-flex-top\"><h2>" + h.rank + "</h2></div>";
                        }
                        if (i == 1) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + h.hospitalName + "</h2><h3>前三总分:" + h.scores
                                + "&nbsp;&nbsp;总用时:" + h.time + "秒</h3></div><div class=\"aui-flex-top aui-flex-top-two\"><h2>" + h.rank + "</h2></div>";
                        }
                        if (i == 2) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + h.hospitalName + "</h2><h3>前三总分:" + h.scores
                                + "&nbsp;&nbsp;总用时:" + h.time + "秒</h3></div><div class=\"aui-flex-top aui-flex-top-three\"><h2>" + h.rank + "</h2></div>";
                        }
                        if (i > 2 && i < 9) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + h.hospitalName + "</h2><h3>前三总分:" + h.scores
                                + "&nbsp;&nbsp;总用时:" + h.time + "秒</h3></div><div class=\"aui-flex-top aui-flex-top-four\"><h2>" + h.rank + "</h2></div>";
                        }
                        if (i >= 9 && i < 99) {
                            childHtml = "<div class=\"aui-flex-box\"><h2>" + h.hospitalName + "</h2><h3>前三总分:" + h.scores
                                + "&nbsp;&nbsp;总用时:" + h.time + "秒</h3></div><div class=\"aui-flex-top aui-flex-top-ten\"><h2>" + h.rank + "</h2></div>";
                        }
                        var div = document.createElement("div");
                        div.className = "aui-flex b-line";
                        div.innerHTML = childHtml;
                        hospital.appendChild(div);
                        if ((i + 1) == result.data.hospitalRank.length) {
                            childHtml = "<div class=\"aui-flex-box\"><h2></h2><h3></h3><p></p></div><div><h2></h2></div>";
                            var div = document.createElement("div");
                            div.className = "aui-flex b-line";
                            div.innerHTML = childHtml;
                            hospital.appendChild(div);
                        }
                    }
                }
            },
            error: function (error) {
                alert("系统异常");
            }
        });
    }
</script>
</body>
</html>
